<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <style>
    /* 进入和离开的过渡效果 */
    .xxx-enter-active, .xxx-leave-active {
      /* 加过渡效果 改变透明度 持续5s */
      transition: opacity .5s;
    }
    /* 进入之前和离开之后的效果【隐藏时的样式】 */
    .xxx-enter, .xxx-leave-to {
      opacity: 0;
    }

    /* 显示的过渡效果 */
    .yyy-enter-active {
      /* 改变多个元素（位移、透明度） 持续1s*/
      transition: all 1s;

    }
    /* 隐藏的过渡效果 */
    .yyy-leave-active {
      /* 改变多个元素（位移、透明度） 持续3s*/
      transition: all 3s;
    }
    /* 隐藏时的样式 */
    .yyy-enter, .yyy-leave-to {
      opacity: 0;
      transform: translateX(30px);
    }
    /* 使用动画 */
    .bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(2);
      }
      100% {
        transform: scale(1);
      }
    }
  </style>
  <div id="app">
    <button @click="isShow=!isShow">toggle</button><br>
    <!-- <transition name="xxx">
      <p v-show="isShow">toggle1</p>
    </transition>
    <transition name="yyy">
      <p v-show="isShow">toggle2</p>
    </transition> -->
    <transition name="bounce">
      <p v-show="isShow" style="display: inline-block;">toggle3</p>
    </transition>
  </div>

  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          isShow: true
        }
      }
    })
  </script>
</body>
</html>